<!--
 -- 签到签退 下载签到点设计稿  {{item.shortName}}
-->
<template>
  <div class="downloadSign">
    <div class="imageWrapper">
      <div class="SigninPointDesignDraft" ref="imageWrapper">
        <img class="card-img" src="../../../assets/images/download/Checkindesigncard-temp.png" />
        <p class="SigninPointDesignDraft_id">{{SigninPointDesignDraft_idstr || ''}}</p>
      </div>
      <img class="sign-card-img" id="signCardTemplate" src="../../../assets/images/download/Checkindesigncard.png" />
      <div v-for="(item,index) in dataList" :key="index" style="position: absolute;top: 3000px;right:0;z-index: -1;">
        <!-- <div class="canvas-template" :id="'imageWrapper_'+item.organizationId">
					<p class="unit-id">{{'ID:SWJFQDD' + item.organizationId || ''}}</p>
					<p class="unit-name">{{item.shortName}}</p>
					<p class="company-name">由{{item.maintainComName||''}}提供智能化消防维保服务</p>
					<img class="card-img" src="../../../assets/images/download/Checkindesigncard.png">
        </div>-->
        <canvas :id="'signPicCanvas'+item.organizationId" width="826" height="582"></canvas>
      </div>
    </div>
    <h4>请选择业主单位</h4>
    <el-table
      v-loading="loading"
      :data="orgOptions"
      ref="mainTable"
      class="tableStyle"
      @selection-change="isItPossibleSelect"
      style="width: 100%"
    >
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column label="序号" type="index" width="50"></el-table-column>
      <el-table-column label="单位" prop="shortName"></el-table-column>
    </el-table>
    <div class="dowmload-bottom">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="handleDownload">下载</el-button>
    </div>
  </div>
</template>
<script>
import JSZip from 'jszip'
import { saveAs } from 'file-saver'
let chooseIndex = []
let srcArr = []
let loading = ''
export default {
  props: {
    // orgOptions: {
    // 	type: Array,
    // 	required: true,
    // },
  },
  data() {
    return {
      dataURL: '',
      SigninPointDesignDraft_idstr: '',
      loading: false,
      dataList: [],
      orgOptions: [],
    }
  },
  created() {},
  mounted() {},
  methods: {
    init(orgOptions) {
      this.orgOptions = orgOptions
    },
    // 判断当前行有没有被选中
    isItPossibleSelect(row) {
      this.dataList = []
      chooseIndex = row
    },
    // 关闭弹窗
    cancel() {
      this.$emit('closeCancel')
    },
    handleDownload() {
      if (chooseIndex.length == 0) {
        return this.$message.warning('请选择业主单位')
      } else if (chooseIndex.length > 50) {
        return this.$message.warning('最多同时选择50个单位')
      }
      this.dataList = chooseIndex
      srcArr = []
      loading = this.$loading({
        lock: true,
        text: '正在下载...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      this.$nextTick(() => {
        this.dataList.map((n, i) => {
          this.drawCanvas(n)
        })
        this.execDownload()
      })
    },
    drawCanvas(obj) {
      let orgId = obj.organizationId
      let c = document.getElementById('signPicCanvas' + orgId)
      var ctx = c.getContext('2d')
      var img = document.getElementById('signCardTemplate')
      var provideText = `由${obj.maintainComName || ''}提供智能化消防维保服务`
      ctx.drawImage(img, 0, 0)
      ctx.fillStyle = '#040000'
      ctx.font = 'normal normal 400 33px arial'
      ctx.fillText(obj.shortName, 50, 180)
      ctx.font = 'normal normal 600 17px arial'
      ctx.fillText(`ID:SWJFQDD${orgId}`, 50, 345)
      ctx.font = 'normal normal 400 23px arial'
      ctx.fillStyle = '#ffffff'
      ctx.fillText(provideText, (826 - provideText.length * 23) / 2, 555)
      srcArr.push({
        id: orgId,
        name: 'SWJFQDD' + orgId + '@' + obj.shortName,
        url: c.toDataURL(),
      })
      c.remove()
    },
    execDownload() {
      var srcArrL = srcArr.length
      var zip = new JSZip()
      //压缩包文件夹名称
      var qrCodeImg = zip.folder('signin_images')
      for (var i = 0; i < srcArrL; i++) {
        var blobData = this.dataURLtoBlob(srcArr[i].url)
        qrCodeImg.file(srcArr[i].name + '.png', blobData, { base64: true })
        if (i == srcArrL - 1) {
          //循环结束保存压缩包
          //将zip序列化为二进制流
          zip
            .generateAsync({ type: 'blob' })
            .then(function (content) {
              let fileName = '签到点设计稿' + new Date().getTime()
              saveAs(content, `${fileName}(${srcArrL}).zip`)
              loading.close()
              this.dataList = []
            })
            .catch((e) => {
              loading.close()
              this.dataList = []
            })
        }
      }
    },
    dataURLtoBlob(dataurl) {
      var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new Blob([u8arr], { type: mime })
    },
  },
}
</script>
<style lang="less">
.sign-card-img {
  position: absolute;
  top: 2000px;
  right: 0;
  z-index: -1;
  width: 826px;
  height: 582px;
}
.downloadSign {
  overflow: hidden;
  overflow-y: auto;
  height: calc(100vh - 130px);
  padding: 0 20px;
  width: 100%;
  h4 {
    position: sticky;
    top: 0px;
    z-index: 10;
    background: #fff;
  }
  .dowmload-bottom {
    position: fixed;
    bottom: 10px;
    right: 0px;
    display: inline-flex;
    button:nth-child(2) {
      margin-right: 10px;
    }
  }
  .imageWrapper {
    // position: fixed;
    z-index: 0;
    .SigninPointDesignDraft {
      position: relative;
      // width: 520px;
      // height: 364px;
      margin-bottom: 20px;
      .card-img {
        width: 550px;
        height: 390px;
        margin-top: 18px;
      }
      .SigninPointDesignDraft_id {
        position: absolute;
        left: 52px;
        bottom: 148px;
        font-weight: 500;
        font-size: 16px;
        color: rgba(4, 0, 0, 1);
      }
    }
  }
  .canvas-template {
    position: relative;
    width: 826px;
    height: 582px;
    .card-img {
      position: absolute;
      top: 0;
      left: 0;
      width: 826px;
      height: 582px;
    }
    .unit-id {
      position: absolute;
      color: #040000;
      font-size: 17px;
      left: 6%;
      top: 56%;
      font-weight: 600;
      z-index: 1;
    }
    .unit-name {
      position: absolute;
      color: #040000;
      font-size: 33px;
      left: 6%;
      top: 26%;
      z-index: 1;
    }
    .company-name {
      position: absolute;
      color: #fff;
      font-size: 23px;
      left: 0;
      top: 91%;
      width: 100%;
      text-align: center;
      z-index: 1;
    }
  }
  h4 {
    padding-bottom: 10px;
  }
}
</style>